<template>


  <div class="div" style="border-radius: 10px;">
    <div class="div1">

      <div class="big_title_style">
        <span class="span1">统计数据</span>
        <span class="span2" v-if="allData">统计时间（{{currentTime}}）</span>
        <span class="span2" v-if="!allData">统计时间（{{startTime}}至{{endTime}}）</span>

      </div>
      <!-- <el-col :span="6"> -->
        <div>
          <el-button :class="defaultButton == 4 ? 'button-sku-blue':''"  size="mini" @click="week()">近七天</el-button>
          <el-button :class="defaultButton == 3 ? 'button-sku-blue':''"  size="mini " @click="month()">近一月</el-button>
          <el-button :class="defaultButton == 2 ? 'button-sku-blue':''"  size="mini " @click="trimester()">近三月</el-button>
          <el-button :class="defaultButton == 1 ? 'button-sku-blue':''"  size="mini" @click="all()">全部</el-button>
        </div>
      <!-- </el-col> -->


    </div>
    <div class="div2 " >
      <div class="div3" :class="activeClass == 'visitors' ? 'mms-symc-card-item-new__wrapper':''" @click="handleQueryStatus('visitors')">
        <el-tooltip content="统计周期内，该店铺内所有商品详情页的被访问去重人数，一个人在统计范围内访问多次，仅计算一次" placement="top" effect="light">
          <div>商品访客数</div>
        </el-tooltip>
        <div class="div4">{{productData.visitorsSum==null?0:productData.visitorsSum}}</div>
<!--        <div class="div5">{{hint}} {{this.hint=='-'?'-':productData.visitorsFormerly}}</div>-->

        <div class="div5">-</div>
      </div>
      <div class="div3 dd " :class="activeClass == 'view' ? 'mms-symc-card-item-new__wrapper':''" @click="handleQueryStatus('view')">
        <el-tooltip content="统计周期内，该店铺内所有商品详情页的被访问累加人次，一个人在统计范围内访问多次，则计算多次" placement="top" effect="light">
          <div>商品浏览量</div>
        </el-tooltip>
        <div class="div4">{{productData.viewNumSum==null?0:productData.viewNumSum}}</div>
<!--        <div class="div5">{{hint}} {{this.hint=='-'?'-':productData.viewNumFormerly}}</div>-->

        <div class="div5">-</div>
      </div>
      <div class="div3 dd" :class="activeClass == 'buy' ? 'mms-symc-card-item-new__wrapper':''" @click="handleQueryStatus('buy')">
        <el-tooltip content="统计周期内，该店铺下所有已支付订单的总数量" placement="top" effect="light">
          <div>商品成交量</div>
        </el-tooltip>
        <div class=" div4">{{productData.buyNumSum==null?0:productData.buyNumSum}}</div>
<!--        <div class="div5">{{hint}} {{this.hint=='-'?'-':productData.buyNumFormerly}}</div>-->

        <div class="div5">-</div>
      </div>
      <div class="div3 dd" :class="activeClass == 'collect' ? 'mms-symc-card-item-new__wrapper':''" @click="handleQueryStatus('collect')">
        <el-tooltip content="统计周期内，该店铺上架商品的收藏总数量，不考虑取消收藏情况" placement="top" effect="light">
          <div>商品收藏数</div>
        </el-tooltip>
        <div class="div4">{{productData.collectNumSum==null?0:productData.collectNumSum}}</div>
<!--        <div class="div5">{{hint}} {{this.hint=='-'?'-':productData.collectNumFormerly}}</div>-->
        <div class="div5">-</div>
      </div>
      <div class="div3 dd" :class="activeClass == 'addCar'? 'mms-symc-card-item-new__wrapper':''" @click="handleQueryStatus('addCar')">


        <el-tooltip content="统计周期内，用户商品加入购物车总数量，不考虑取消收藏情况" placement="top" effect="light">
          <div>加入购物车数</div>
        </el-tooltip>
        <div class="div4">{{productData.addCarNumSum==null?0:productData.addCarNumSum}}</div>
<!--        <div class="div5">{{hint}} {{this.hint=='-'?'-':productData.addCarNumFormerly}}</div>-->
        <div class="div5">-</div>
      </div>
      <div class="div3 dd" :class="activeClass == 'repurchaseRate' ? 'mms-symc-card-item-new__wrapper':''" @click="handleQueryStatus('repurchaseRate')">

        <el-tooltip content="统计周期内，复购买家数/买家数，即二次购买的客户转化为复购的比例" placement="top" effect="light">
          <div>复购率</div>
        </el-tooltip>

        <div class="div4">{{productData.repurchaseRateSum==null?0:productData.repurchaseRateSum}}%</div>
<!--        <div class="div5">{{hint}} {{this.hint=='-'?'-':productData.repurchaseRateSumFormerly}}</div>-->
        <div class="div5">-</div>
      </div>
      <div class="div3 dd" :class="activeClass == 'paymentConversionRate' ? 'mms-symc-card-item-new__wrapper':''" @click="handleQueryStatus('paymentConversionRate')">

        <el-tooltip content="统计周期内，支付买家数/商品访客数，即访客用户数转化为支付买家的比例" placement="top" effect="light">
          <div>支付转化率</div>
        </el-tooltip>

        <div class="div4">{{productData.paymentConversionRateSum==null?0:productData.paymentConversionRateSum}}%</div>
<!--        <div class="div5">{{hint}} {{this.hint=='-'?'-':productData.paymentConversionRateFormerly}}</div>-->
        <div class="div5">-</div>
      </div>



    </div>
  </div>


</template>

<script>
  import {
    getProductData
  } from '@/api/dataCentre/productCount'
  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data() {
      //这里存数据
      return {

        //默认按钮
        defaultButton:1,
        // 默认数字
        activeClass: 0,
        //未指定日期查全部数据
        allData: true,
        //结束日期
        endTime: '',
        //开始日期
        startTime: '',
        //当前时间
        currentTime: '',
        //商品统计数据
        productData:[],
        //文字提示
        hint:'-'

      };
    },
    props: {
      rewStr: {
        type: String,
        default: null,
      },
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {
      week() {
        this.defaultButton = 4
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);

        this.endTime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()
        console.log(this.endTime)
        this.startTime = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        this.allData = false
        this.getData()

        this.hint = "对比七天前"
      },
      month() {

        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        this.endTime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()
        this.startTime = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        this.allData = false
        this.getData()
        this.hint = "对比三十天前"
      },
      trimester() {
        this.defaultButton = 2
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        this.endTime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()
        this.startTime = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        this.allData = false
        this.getData()
        this.hint = "对比三个月前"
      },
      all() {
        this.defaultButton = 1
        const date = new Date();
        this.currentTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        this.allData = true
        this.endTime = null
        this.startTime = null
        this.getData()
        this.hint = "-"
      },
      getData(){
        getProductData(this.startTime,this.endTime).then((response) => {
          this.productData = response.data
        })
      },
      /** 点击按钮进行刷新 */
      handleQueryStatus(index) {

        this.activeClass = index;
        if (index=='visitors'){
          this.$emit("update:rewStr", index);
          this.$emit('getList');
        }
        if (index=='view'){
          this.$emit("update:rewStr", index);
          this.$emit('getList');
        }
        if (index=='buy'){
          this.$emit("update:rewStr", index);
          this.$emit('getList');
        }
        if (index=='collect'){
          this.$emit("update:rewStr", index);
          this.$emit('getList');
        }
        if (index=='addCar'){
          this.$emit("update:rewStr", index);
          this.$emit('getList');
        }
        if (index=='repurchaseRate'){
          this.$emit("update:rewStr", index);
          this.$emit('getList');
        }
        if (index=='paymentConversionRate'){
          this.$emit("update:rewStr", index);
          this.$emit('getList');
        }
      },

    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
      this.all()

      var select = this.$route.query.type
      if (select){
        this.handleQueryStatus(select)
      }else{
        this.handleQueryStatus("visitors")
      }


    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {
    },//生命周期 - 创建之前
    beforeMount() {
    },//生命周期 - 挂载之前
    beforeUpdate() {
    },//声明周期 - 更新之前
    updated() {
    },//生命周期 - 更新之后
    beforeDestroy() {
    },//生命周期 - 销毁之前
    destroyed() {
    },//生命周期 - 销毁之后
    activated() {
    },//缓存keep-alive
  }
</script>

<style scoped>
  body {
    background: #ecf0f3;
  }

  .div {
    background: #fff;
    margin: 5px 5px 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .div1 {
    display: flex;
    align-content: center;
    justify-content: space-between;
  }

  .span1 {
    font-size: 16px;
    font: 600;
    margin-right: 10px;

  }

  .span2 {
    border:1px;
    font-size: 14px;
    color: #606266;
    margin-top: 3px;
  }

  .div2 {
    padding: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }

  .div3 {
    cursor:pointer;
    flex-basis: 25%;
    padding: 10px 0 20px 30px;
  }
  .div3.dd {
    border-left: 1px solid #eee;
  }

  .div4 {
    margin: 15px 0;
    padding-top: 5px;
    font-size: 20px;
    font: 600;
  }

  .div5 {
    color: #c0c4cc;
  }

  .first-title__title {
    font-size: 20px;
    font-weight: 500;
    color: #323234;
    margin-bottom: 7px;
  }

  /*.time_button {*/
  /*  margin-left: 1000px;*/
  /*}*/
  .div {
    background: #fff;
    margin: 5px 5px 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .mms-symc-card-item-new__wrapper{
    /* background: #f0f7ff; */
    /* border: 1px solid #91bbff; */
    /* border-top: 2px solid #407cff; */
    background-color: #F5FAFF;
    color: #5DA9EF;
  }
  .button-sku-blue {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }

</style>
